<template>
    <!-- 最新 -->
    <div id="starting">
        <el-carousel height="330px">
            <el-carousel-item v-for="item in 4" :key="item">
                <div id="newSong" v-for="(o, index) in newSong[item]" :key="index">
                    <div id="cont">
                        <img :src='"/api/" + o.imgUrl' id="img" @click="toMusic(o)">
                        <span id="time">{{ o.time }}</span>
                        <router-link style="margin-top: 20px;" 
                        :to="{ path: '/song', query: { id: o.songsID } }">
                            {{ o.songName }}
                        </router-link><br>
                        <router-link :to="{ path: '/song', query: { id: o.songsID } }">
                            {{ o.singerName }}
                        </router-link>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newSong: [],
        }
    },
    methods: {
        toMusic: function (data) {
            // console.log( this.APlayer);
            // ap.list.add([{
            //     name: 'name',
            //     artist: 'artist',
            //     url: 'url.mp3',
            //     cover: 'cover.jpg',
            //     lrc: 'lrc.lrc',
            //     theme: '#ebd0c2'
            // }]);
            // console.log(data);
            let song = {
                name: data.songName,
                artist: data.singerName,
                url: '/api/' + data.url,
                cover: '/api/' + data.imgUrl,
                lrc: data.songWord,
                songsId: data.songsID,
                time: data.time
            };
            for (const i in this.$audio) {
                if (this.$audio[i].songsId == data.songsID) {
                    this.$audio.splice(i, 1);
                    break;
                }
            }
            // console.log(song);
            // this.$router.push('/music')
            this.$audio.unshift(song)
            this.$router.push("/music")
        }
    },
    created: function () {
        // console.log(this.$audio[0]);
        try {
            this.axios({
                url: "/api/listens/newSongs"
            }).then(res => {
                this.newSong = res.data.data.data.slice(0, 9)
                for (let i = 1; i <= 4; i++) {
                    this.newSong[i] = res.data.data.data.slice((i - 1) * 9, i * 9)
                    for (let y in this.newSong[i]) {
                        this.newSong[i][y].singerName = this.newSong[i][y].singerName.toString()
                    }
                }
            }).catch(err => {
                console.log(err);
            })
        } catch (error) {
            console.log("新歌" + error);
        }
    }
}
</script>

<style>
#starting {
    background-color:plum;
    width: 80%;
    margin: 0px auto;
}

#newSong {
    display: inline-block;
    width: 33%;
    margin-top: 5px;
    margin-left: 2px;
}

#newSong #img {
    width: 90px;
    height: 90px;
    float: left;
}

#newSong #cont {
    margin: 0px auto;
    width: 95%;
    border-bottom: 1px #f2f2f2 solid;
    text-align: left;
    height: 90px;
    line-height: 40px;
}

#newSong #cont:hover {
    cursor: pointer;
}

#newSong #cont span:hover {
    cursor: pointer;
    color: white;
}

#newSong #cont #time {
    float: right;
    line-height: 75px;
}
</style>